<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
           background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593583017056&di=5a8859365824c3ee52267dcbe2983faf&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D887498250%2C3488591340%26fm%3D214%26gp%3D0.jpg);
        }
        input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}
.modal-content {
    background-color: #fefefe;
    margin: 3% auto ; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 40%; /* Could be more or less, depending on screen size */
}

    </style>
</head>
<body>
    <div class="modal-content">
        <div class="imgcontainer">
            
            <img src="https://static.runoob.com/images/mix/img_avatar.png" alt="Avatar" class="avatar">
          </div>
        <div class="container">
            <label><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" required>
      
            <label><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>
            <a href="page3.html"><button>登陆</button></a>
            
    </div>
    
</body>
</html>